import { h }    from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
// 下面内容请按需导入
// import { classModule } from 'snabbdom/build/package/modules/class'
import { styleModule } from 'snabbdom/build/package/modules/style.js'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners.js'

// import Node from './node'

import style from './index.scss'

// 导入原始数据
import originalData from './originalData'

// var vnode;


let margin = 10
let sortBy = 'rank'
let totalHeight = 0
let data = originalData.map(od => od)
let nextKey = data.length + 1

// 排序按钮数组
const btns = ['rank', 'title', 'description']
let oldVnode = null
const patch = init([
  styleModule,
  eventListenersModule
])


// 需要更新的地方，通过函数创建，便于复用
// 初始化首次渲染的节点数据
let pageTools = null
let pageList = null


// 初始化渲染函数
render()

function render() {
  const pageTitle = h('h1', 'Top 10 movies')

  renderPageTools()
  renderPageList()

  const vnode = h('div#container', [
    pageTitle,
    pageTools,
    pageList
  ])
  // 获取全局容器元素
  const app = document.querySelector('#app')
  
  oldVnode = patch(app, vnode)

  // 初始化的渲染需调用第二次，以便正确获取 elmHeight后设置正确的偏移单位
  renderPageList()
}

// 按钮点击事件回调函数
function btnClickHandler(type) {
  // 根据传入type值，设置当前排序类型
  sortBy = type === 'description' ? 'desc' : type
  // 重新渲染工具节点
  renderPageTools()
  // 重新渲染列表节点
  renderPageList()
}

function renderPageTools() {
  const node = h('div.tools', [
    h('span', 'Sort by:'),
    // 遍历渲染三个排序按钮，并根据不同功能设置不同class，内容渲染时将首字母大写
    h('span.btns',
      btns.map(btn => renderBtn(btn))
    ),
    h('a.btn.add', {
      on: {
        click: add
      }
    }, 'Add')
  ])

  if (pageTools) {
    // 已存在老节点的情况下，通过patch更新节点内容
    pageTools = patch(pageTools, node)
  } else {
    pageTools = node
  }
}
// 渲染按钮列表
function renderBtn(btn) {
  // 获取按钮对应数据中的类型
  const type = btn === 'description' ? 'desc' : btn
  return h(`a.btn.${btn}.${type === sortBy ? 'active' : ''}`,
    {
      on: {
        // 注册点击事件
        click: e => btnClickHandler(btn)
      }
    },
    // 内容渲染时将首字母大写
    btn.replace(/./, w => w.toUpperCase())
  )
}
// 渲染列表数据函数
function renderPageList() {
  // 获取根据排序字段排序后的数组列表
  data.sort((a, b) => {
    if (a[sortBy] > b[sortBy]) return 1
    if (a[sortBy] < b[sortBy]) return -1
    return 0
  })

  // 扩展数组的属性
  data = data.reduce(function (acc, m) {
    var last = acc[acc.length - 1];
    m.offset = last ? last.offset + last.elmHeight + margin : margin
    return acc.concat(m);
  }, [])

  totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight

  const items = data.map(l => {
    return h('div.row', {
      // 给数组设置key，避免diff算法造成的节点渲染错误
      key: l.rank,
      style: {
        opacity: '0',
        transform: 'translate(-200px)',
        delayed: { transform: 'translateY(' + l.offset + 'px)', opacity: '1' },
        remove: { opacity: '0', transform: 'translateY(' + l.offset + 'px) translateX(200px)' }
      },
      hook: {
        insert: function insert(vnode) { l.elmHeight = vnode.elm.offsetHeight }
      }
    }, [
      h('div.r', l.rank),
      h('div.t', l.title),
      h('div.d', l.desc),
      h('div.btn.rm', { on: { click: e => remove(l) } }, 'x')
    ])
  })
  // 创建新虚拟节点
  const node = h('div.list', { style: { height: totalHeight + 'px' } }, items)

  if (pageList) {
    // 已存在老节点的情况下，通过patch更新节点内容
    pageList = patch(pageList, node)
  } else {
    pageList = node
  }
}

// 新增一项
function add() {
  // 随机从原始数据中获取一条
  var n = originalData[Math.floor(Math.random() * 10)];
  // 按当前data数据结构，扩展属性并合并
  data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
  // 重新渲染列表视图
  renderPageList()
}

function remove(d) {
  data = data.filter(m => m.rank !== d.rank)
  renderPageList()
}

